<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>FormData Demo</title>
<script src="/kissy/build/seed.js"></script>
    <script src="/kissy/src/package.js"></script>

</head>
<body style="padding: 20px">
<h1>FormData 无刷新上传文件</h1>

<input type="file" id="test" name='test'/>

<script>
    KISSY.use("node,io", function (S, Node, IO) {
        var $ = Node.all;
        var f = $("#test"), domF = f[0];

        f.on("change", function () {
            var formData = new FormData();
            formData.append(domF.name, domF.files[0]);

            var xhr = IO({
                url:'./upload.jss',
                type:"post",
                processData:false,
                data:formData,
                dataType:'json',
                contentType:false,
                beforeSend:function (xhr) {
                    // 上传监听 upload
                    xhr.getNativeXhr().upload.addEventListener('progress', function (ev) {
                        S.log({ 'loaded':ev.loaded, 'total':ev.total });
                    });
                },
                success:function (d) {
                    S.log(d);
                }
            });
        });
    });
</script>
</body>
</html>
